<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> css样式设置小技巧 </title>
    <style type="text/css">
        h2 {
            color: black;
            background: green;
        }

        .txtCenter {
            border: 1px solid red;
            text-align: center;
        }

        .imgCenter {
            border: 1px solid blue;
            text-align: center;
        }

        table {
            margin: 0 auto;
        }

        ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        li {
            float: left;
            display: inline;
            margin-right: 8px;
        }

        table {
            margin: 0 auto;
        }

        ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        li {
            float: left;
            display: inline;
            margin-right: 20px;
        }

        /*下面是任务区代码*/
        .wrap {
            background: #ccc;
        }

        .container {
            float: left;
            position: relative;
            left: 50%
        }

        .container ul {
            list-style: none;
            margin: 0;
            padding: 0;
            position: relative;
            left: -50%;
        }

        .container li {
            float: left;
            display: inline;
            margin-right: 8px;
        }

        /*下面是代码任务区*/
        .wrap_container {
            clear: both;
            float: left;
            position: relative;
            left: 50%
        }

        .wrap-center {
            background: #ccc;
            position: relative;
            left: -50%;
        }

    </style>
</head>
<body>
<!--============================分割线===============================-->
<h2>盒模型代码简写</h2>

<div class="txtCenter">我想要在父容器中水平居中显示。</div>

<div class="imgCenter"><img src="http://img.mukewang.com/52da54ed0001ecfa04120172.jpg"></div>

<!--============================分割线===============================-->
<h2>定宽块状元素水平居中</h2>
<!--这时也分两种情况：定宽块状元素和不定宽块状元素-->

<div style="border: 1px solid red ;width: 200px;margin: 20px auto">我是定宽块状元素，哈哈，我要水平居中显示。</div>

<!--============================分割线===============================-->
<h2>不定宽块状元素水平居中</h2>


<pre>
    加入 table 标签
    设置 display: inline 方法：与第一种类似，显示类型设为 行内元素，进行不定宽元素的属性设置
    设置 position:relative 和 left:50%：利用 相对定位 的方式，将元素向左偏移 50% ，即达到居中的目的
</pre>


<div>
    <table>
        <tbody>
        <tr>
            <td>
                <ul>
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                </ul>
            </td>
        </tr>
        </tbody>
    </table>
</div>


<table>
    <tbody>
    <tr>
        <td>
            <div class="wrap">
                我要水平居中
            </div>
        </td>
    </tr>
    </tbody>
</table>


<!--============================分割线===============================-->
<h2>不定宽块状元素水平居中 方法3</h2>

<div class="container">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>

<!--下面是代码任务区-->
<div class="wrap_container">
    <div class="wrap-center">我们来学习一下这种方法。</div>
</div>

</body>

</html>